<div class="container">
  <h1 class="title">
    {{ 'PAGES.HOME.TITLE' | translate }}
  </h1>
  <div class="headtitle-text" i18n>{{ 'PAGES.HOME.CHOOSE_GAME_VERSION' | translate }}</div>
  <div class="ContainerLattice">
    <div id="imageREF" class="imageContainerREF" #imageREF data-action="Ref" (mouseover)="onMouseEnter($event, 'Ref')" (mouseout)="onMouseLeave($event, 'Ref')" (click)="onClick($event, 'Ref')">
      <img id="ImagesREFEnable" src="assets/REF.Enable.png" alt="REFSelected" [ngStyle]="{'display': Images_REF_Shown ? 'block' : 'none'}"/>
      <img id="ImagesREFDisable" src="assets/REF.Disable.png" alt="REF" [ngStyle]="{'display': !Images_REF_Shown ? 'block' : 'none'}"/>
      <span>1.33+</span>
      <span class="reccomendations">Optimal:2.0.3</span>
    </div>
    <div id="imageTFT" class="imageContainerTFT" #imageTFT data-action="Tft" (mouseover)="onMouseEnter($event, 'Tft')" (mouseout)="onMouseLeave($event, 'Tft')" (click)="onClick($event, 'Tft')">
      <img id="ImagesTFTEnable" src="assets/TFT.Enable.png" alt="TFTSelected" [ngStyle]="{'display': Images_TFT_Shown ? 'block' : 'none'}"/>
      <img id="ImagesTFTDisable" src="assets/TFT.Disable.png" alt="TFT" [ngStyle]="{'display': !Images_TFT_Shown ? 'block' : 'none'}"/>
      <span>1.24+</span>
      <span class="reccomendations">Optimal:1.24-1.28</span>
    </div>
    <div id="imageROC" class="imageContainerROC" #imageROC data-action="Roc" (mouseover)="onMouseEnter($event, 'Roc')" (mouseout)="onMouseLeave($event, 'Roc')" (click)="onClick($event, 'Roc')">
      <img id="ImagesROCEnable" src="assets/ROC.Enable.png" alt="ROCSelected" [ngStyle]="{'display': Images_ROC_Shown ? 'block' : 'none'}"/>
      <img id="ImagesROCDisable" src="assets/ROC.Disable.png" alt="ROC" [ngStyle]="{'display': !Images_ROC_Shown ? 'block' : 'none'}"/>
      <span>1.24 - 1.31</span>
      <span class="reccomendations">Optimal:1.24-1.28</span>
    </div>
  </div>

  <div class="subtitle-text">{{ 'PAGES.HOME.ADVANCED_SETTING' | translate }}</div>
  <div class="ContainerLattice AdvancedSettings">
    <label class="switch">
      <input type="checkbox" class="hidden-checkbox" checked id="ModeSwitch" #ModeSwitch (input)="onInputChange(ModeSwitch.id)">
      <div class="slider">
        <span>{{ 'PAGES.HOME.INSTALL_ON_FOLDER' | translate }}</span>
        <span>{{ 'PAGES.HOME.INSTALL_ON_MAP' | translate }}</span>
      </div>
    </label>
    <label class="commander-group">
      <input type="radio" id="BJoptionOn" name="commander-group" value="BJoptionOn" checked #BJoptionOn (input)="onInputChange(BJoptionOn.id)" hidden>  
      <label for="BJoptionOn" class="radio-btn">{{ 'PAGES.HOME.INCLUDE_COMMANDER' | translate }}</label>  
      <input type="radio" id="BJoptionVsAI" name="commander-group" value="BJoptionVsAI" #BJoptionVsAI (input)="onInputChange(BJoptionVsAI.id)" hidden>  
      <label for="BJoptionVsAI" class="radio-btn">{{ 'PAGES.HOME.INCLUDE_COMMANDER_VSAI' | translate }}</label>  
      <input type="radio" id="BJoptionOff" name="commander-group" value="BJoptionOff" #BJoptionOff (input)="onInputChange(BJoptionOff.id)" hidden>  
      <label for="BJoptionOff" class="radio-btn">{{ 'PAGES.HOME.INCLUDE_COMMANDER_OFF' | translate }}</label>
    </label> 
  </div>
  <div class="ContainerLattice MoreSettings">
    <label class="checkboxbj">
      <input type="checkbox" class="switch-text" id="Optimise" [checked]="optimize" checked #Optimise (input)="onInputChange(Optimise.id)">{{ 'PAGES.HOME.OPTIMISE' | translate }}
    </label>
    <label class="checkboxbj">
      <input type="checkbox" class="switch-text" id="ForceLang" [checked]="forcelang" #ForceLang (input)="onInputChange(ForceLang.id)">{{ 'PAGES.HOME.FORCELANG' | translate }}
    </label>
  </div>
</div>
